<template>
  <!-- <div>住户信息展示</div> -->
  <div class="container">
    <el-table
      :data="
        $store.state.HomeModule.listdata.slice(
          (currentPage4 - 1) * pageSize4,
          currentPage4 * pageSize4
        )
      "
      stripe
      style="width: 100%"
    >
      <el-table-column prop="id" label="编号" />
      <el-table-column prop="number" label="门牌号" />
      <el-table-column prop="name" label="户主姓名" />
      <el-table-column prop="address" label="住址" />
      <el-table-column prop="type" label="房屋用途" />
      <el-table-column prop="typeHome" label="户型" />
      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
            >&nbsp;编辑&nbsp;</el-button
          >
          <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >&nbsp;删除&nbsp;</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页区域 -->
    <div class="bottom">
      <el-pagination
        v-model:current-page="currentPage4"
        v-model:page-size="pageSize4"
        layout="total, sizes, prev, pager, next, jumper"
        :total="$store.state.HomeModule.listdata.length"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <!-- 修改信息弹出框 -->
    <UpdateDialog />
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, reactive } from "vue";
import UpdateDialog from "@/components/UpdateDialog.vue";
import { useStore } from "vuex";

let search = ref("");
let store = useStore();

const currentPage4 = ref(1); //当前的页数
const pageSize4 = ref(10); //当前的显示条数
const small = ref(false);
const background = ref(false);
const disabled = ref(false);

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
  pageSize4.value = val;
};
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
  currentPage4.value = val;
};
interface User {
  date: string;
  name: string;
  address: string;
}
const handleEdit = (index: number, row: User) => {
  console.log(index, row);
  store.commit("SET_DIALOG", row);
};
const handleDelete = (index: number, row: User) => {
  console.log(index, row);
  store.dispatch("DEL_DATA", row);
};

// let tableData = reactive({
//   listdata: [],
// });

onMounted(() => {
  store.dispatch("USERUPDATE_LIST");
});
</script>

<style scoped lang="scss">
.container {
  width: 98%;
  margin: 20px auto;
  .bottom {
    margin: 5px;
    .el-pagination {
      justify-content: center;
    }
  }
}
</style>
